/*
 * @Date: 2023-08-08 09:26:45
 * @LastEditors: lyx
 * @LastEditTime: 2023-08-09 10:02:14
 * @FilePath: \sup-mini-app\src\components\Daily\English\index.tsx
 * @Description:
 */
import React, { useEffect, useState } from "react";
import { View } from "@tarojs/components";
import "./index.scss";
import { useSetState } from "ahooks";
import { queryEverydayEnglish } from "@/services/daily/English";

function English() {
  const [currentDate, setCurrentDate] = useSetState<IDate>({
    date: "",
    month: "",
    year: "",
  });

  const [dailyEnglish, setDailyEnglish] = useState<IDaily>({} as IDaily);

  const getEverydayEnglish = async () => {
    const { status, content = [], msg = "" } = await queryEverydayEnglish();
    if (status) {
      setDailyEnglish(content?.[0] ?? {});
    } else {
      console.log(msg);
    }
  };

  useEffect(() => {
    //  ? Tue Aug 08 2023
    const cDateList = new Date().toDateString().split(" ");
    setCurrentDate({
      date: cDateList[2],
      month: cDateList[1],
      year: cDateList[3],
    });
    getEverydayEnglish();
  }, []);

  return (
    <View
      className="english-wrapper"
      style={{ backgroundImage: `url(${dailyEnglish?.image?.[0] ?? ""})` }}
    >
      <View className="info">
        <View className="date">
          <View className="day">{currentDate?.date}</View>
          <View className="date">
            {`${currentDate?.month}.${currentDate?.year}`}
          </View>
        </View>

        <View className="title">{dailyEnglish?.title ?? ""}</View>
        <View className="summary">{dailyEnglish?.summary ?? ""}</View>
      </View>
    </View>
  );
}

export default English;
